<template>
  <a-table bordered class="ant-table-striped" size="middle" :columns="columns" :row-class-name="(_record: any, index: number) => (index % 2 === 1 ? 'table-striped' : null)">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex !== 'operation'">
        <div class="editable-cell">
          <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)"><a-button type="primary">保存</a-button></a-typography-link
            >&nbsp; <a-popconfirm title="确定取消?" @confirm="cancel(record.key)"> <a-button type="primary">取消</a-button> </a-popconfirm>
            <template v-if="record.dataType == 'String' || record.dataType == 'Int'"> &nbsp; </template>
          </span>
          <span v-else>
            <a-button type="primary" @click="edit(record.key)">编辑</a-button>&nbsp;
            <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="onDelete(record.key)"> <a-button type="primary">删除</a-button></a-popconfirm>
          </span>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="ts">
  import { cloneDeep } from 'lodash-es';
  import { Ref, UnwrapRef } from 'vue';

  const props = defineProps({
    isOperate: {
      type: Number,
    },
    tableSmallModal: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  let columns = [
    { title: '码值取值', dataIndex: 'configsValue' },
    { title: '编码名称', dataIndex: 'configsName' },
    { title: '编码含义', dataIndex: 'configsMsg' },
  ];
  const { isOperate } = { ...props };
  if (isOperate == 1) {
    columns = [
      { title: '码值取值', dataIndex: 'configsValue' },
      { title: '编码名称', dataIndex: 'configsName' },
      { title: '编码含义', dataIndex: 'configsMsg' },
      { title: '操作', dataIndex: 'operation' },
    ];
  }
  interface DataItem1 {
    configsValue: number;
    configsName: string;
    configsMsg: string;
  }
  let dataSource: Ref<DataItem1[]> = ref([]);
  dataSource.value = [
    {
      configsValue: 200,
      configsName: 'ddd',
      configsMsg: 'ssss',
    },
  ];
  let editableData: UnwrapRef<Record<string, DataItem1>> = reactive({});
  const edit = (keys: string) => {
    editableData[keys] = cloneDeep(dataSource.value.filter(item => keys === item.key)[0]);
  };
  // 码值定义小气泡
  // let visible = ref<boolean>(false);
  // 保存时校验规则
  const save = (keys: string) => {
    Object.assign(dataSource.value.filter(item => keys === item.key)[0], editableData[keys]);
    delete editableData[keys];
  };
  // 删除
  const onDelete = (keys: string) => {
    // console.log('触发了我', keys);

    dataSource.value = dataSource.value.filter(item => item.key !== keys);
    console.log(dataSource.value);
  };
  const cancel = (keys: number) => {
    delete editableData[keys];
  };
</script>
<style lang="less" scoped></style>
